<template>
  <div class="filter-condition">
    <el-select
      :class="{'hiden':index == '0'}"
      v-model="logicValue"
      @change="setCondition"
      placeholder="请选择"
    >
      <el-option v-for="item in logic" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>

    <el-select v-model="column" @change="changeColumn" placeholder="请选择">
      <el-option
        v-for="(item, index) in columns"
        v-show="index > 0"
        :key="index"
        :label="item"
        :value="item"
      ></el-option>
    </el-select>

    <el-select v-model="operatorValue" @change="setCondition" placeholder="请选择">
      <el-option
        v-for="(item, index) in operator"
        :key="index"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>

    <el-select v-model="value" placeholder="请选择" @change="setCondition" filterable allow-create>
      <el-option
        v-for="(item, index) in columnValues[column].values"
        :key="index"
        :label="item"
        :value="item"
      ></el-option>
    </el-select>

    <div>
      <el-button type="danger" @click="removeCondition">删除</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: ["condition", "index", "columnValues", "types", "columns"],
  data() {
    return {
      logic: [
        {
          value: "and",
          label: "与",
        },
        {
          value: "or",
          label: "或",
        },
      ],
      operator: [],
      logicValue: "and",
      operatorValue: null,
      value: null,
      column: null,
      type: "",
    };
  },
  computed:{
      getCondition(){
          return this.condition
      }
  },
  watch:{
      getCondition(condition){
          this.column = condition.column
          this.operatorValue = condition.operator
          this.value = condition.value
      }
  },
  created() {
    this.column = this.condition.column
    this.operatorValue = this.condition.operator
    this.value = this.condition.value

    this.type = this.getType(this.column)

    this.setOperator(this.column);

  },
  updated(){
    //   console.log("gengxingle")
  },
  methods: {
    changeColumn(column) {
      this.setOperator(column);
      this.setCondition();
    },
    getType(column) {
      let type = "";
      for (let i = 0; i < this.columns.length; i++) {
        if (column == this.columns[i]) {
          type = this.types[i - 1];
        }
      }

      return type;
    },
    removeCondition(){
        this.$emit('remove-condition', this.index)
    },
    setOperator(column) {
      let type = this.getType(column);

      if (type == "object") {
        this.operator = [
          {
            value: "et",
            label: "等于",
          },
          {
            value: "ut",
            label: "不等于",
          },
        ];
      } else {
        this.operator = [
          {
            value: "et",
            label: "等于",
          },
          {
            value: "ut",
            label: "不等于",
          },
          {
            value: "gt",
            label: "大于",
          },
          {
            value: "get",
            label: "大于或等于",
          },
          {
            value: "lt",
            label: "小于",
          },
          {
            value: "let",
            label: "小于或等于",
          },
        ];
      }

      if(this.type != type){
          this.operatorValue = 'et'
          this.type = type
      }
    },
    setCondition() {
      let condition = {
        logic: this.logicValue,
        column: this.column,
        operator: this.operatorValue,
        value: this.value,
      };

      this.$emit("set-condition", this.index, condition);
    },
  },
};
</script>

<style scoped>
.filter-condition {
  display: flex;
  justify-content: space-around;

  margin-bottom: 10px;
}

.hiden {
  visibility: hidden;
}
</style>